<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .message {
            width: 500px;
            /* height: 500px; */
            border: 1px solid;
            margin: 0 auto;
            position: relative;
        }

        .myinput {
            width: 480px;
            height: 100px;
            /* position: absolute; */
            bottom: 50px;
        }

        .btn {
            /* position: absolute; */
            bottom: 10px;
            right: 10px;
        }
    </style>
</head>

<body>
    <div class="message">
        <h1>简易聊天</h1>
        <ul>
            <!-- <li>今天我又摸鱼了</li>
            <li>明天我还要摸鱼</li>
            <li>摸鱼还能拿工资太棒了！！</li> -->
        </ul>
        <input class="myinput">

        </input>
        <button class="btn">发送</button>
    </div>
    <!-- <script src="./socket.io.js"></script> -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script>
        // 获取输入框
        let myinputEle = document.querySelector(".myinput");
        let btn = document.querySelector(".btn");
        // console.log(btn,myinputEle);


        //点击事件
        btn.onclick = function(){
            
            let inputEle = myinputEle.value;
            // console.log(inputEle);

            $.ajax({
                url:"/add",
                myinputEle:"get",
                data:{
                    inputEle:inputEle,
                },
                success(res){
                    console.log(res);
                    
                }
            })
            myinputEle.value = "";
        }




        // ajax轮循获取数据，然后再渲染页面
        setInterval(function(){
            $.ajax({
                    url:"/take",
                    myinputEle:"get",
                    success(res){
                        console.log(res);
                        renderDom(res)
                    }
                })
        },50);



        // 渲染页面函数
        function renderDom(data){
            // 获取ul
            let ulEle = document.querySelector("ul");
            // 将原来的ul里的值清空
            ulEle.innerHTML = "";
            data.forEach(function(item){
                let liEle = document.createElement("li");
                liEle.innerHTML=`${item.content}`;

                // 将创建的li放入ul中
                ulEle.appendChild(liEle);
            })

        }

    </script>
</body>

</html>